<template>
  <div class="numscroll-container">
    <ul>
      <li v-for="(item,index) in numArr">
        <span ref="numberItem">
          <i>0</i>
          <i>1</i>
          <i>2</i>
          <i>3</i>
          <i>4</i>
          <i>5</i>
          <i>6</i>
          <i>7</i>
          <i>8</i>
          <i>9</i>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numArr: ["0", "0", "0", "0", "0"]
    };
  },
  props: {
    count: ""
  },
  created() {},
  mounted() {
    this.changeNum();
  },
  methods: {
    numberScroll() {
      this.numberItems = this.$refs.numberItem;
      // console.log(this.numberItems);
      for (var j = 0; j < this.numberItems.length; j++) {
        let elem = this.numberItems[j];
        console.log(this.numArr[j],elem.childNodes)
        let arr = elem.childNodes

        // for(var k=0;k<arr.length;k++){
        //       console.log(arr[k])
        //       arr[k].setAttribute('class', 'animation3') 
        // }
     
      
      }
    },
    changeNum() {
      let num = this.count.toString();
      if (num.length < 5) {
        num = "0" + num;
        this.changeNum(num);
      } else if (num.length === 5) {
        this.numArr = num.split("");
      } else {
        console.log("超过8位数");
      }
      console.log(this.numArr);
    },
    getRule() {
      var animation = {};
      var rule, cssRule;
      var ss = document.styleSheets;
      for (var i = 0; i < ss.length; ++i) {
        for (var x = 0; x < ss[i].rules.length; ++x) {
          rule = ss[i].rules[x];
          if (rule.name == "run" && rule.type == 7) {
            animation.cssRule = rule;
            animation.styleSheet = ss[i];
            animation.index = x;
          }
        }
      }
      return animation;
    }
  },
  watch: {
    count: function() {
      this.changeNum();
    },
    numArr: function() {
      this.numberScroll();
    }
  }
};
</script>

<style scoped lang="scss">
.numscroll-container {
  text-align: center;
  ul {
    li {
      display: inline-block;
      span {
        display: block;
        overflow: hidden;
        width: 100px;
        height: 100px;
        background: #ccc;

        i {
          position: relative;
          // animation: numScroll 6s infinite;
          // -webkit-animation: numScroll 5s infinite;
          display: block;
          text-align: center;
          height: 100px;
          line-height: 100px;
          font-size: 30px;
          font-style: normal;
        }
      }
    }
  }
}
.animation9 {
   position: relative;
  animation: numScroll 6s infinite;
  -webkit-animation: numScroll 5s infinite;
}
@keyframes numScroll {
  from {
    top: 0px;
  }
  to {
    top: -900px;
  }
}
@-webkit-keyframes numScroll{
  from {top: 0px;}
  to {top: -900px;}
}

.animation3 {
   position: relative;
  animation: numScroll 6s infinite;
  -webkit-animation: numScroll 5s infinite;
}
@keyframes numScroll {
  from {
    top: 0px;
  }
  to {
    top: -300px;
  }
}
@-webkit-keyframes numScroll{
  from {top: 0px;}
  to {top: -300px;}
}
.animation4 {
   position: relative;
  animation: numScroll 6s infinite;
  -webkit-animation: numScroll 5s infinite;
}
@keyframes numScroll {
  from {
    top: 0px;
  }
  to {
    top: -400px;
  }
}
@-webkit-keyframes numScroll{
  from {top: 0px;}
  to {top: -400px;}
}
</style>
